<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>售后详情</title>
	<link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../../css/app.css" />
	<style type="text/css">
		.aui-text-redf0 {
			color: #ff3862;
		}

		.aftersale-goods {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			height: 4.85rem;
			padding-top: 0.85rem;
		}

		.aftersale-goods-img img {
			width: 4.25rem;
			height: 4.25rem;
			border-radius: 0.25rem;
			margin-right: 1.15rem;
		}

		.aftersale-goods-content {
			flex: 1;
		}

		.product-name {
			height: .85rem;
			line-height: 0.85rem;
			margin-bottom: 0.2rem;
		}

		.product-price {
			margin-top: 0.2rem;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: flex-end;
		}

		.aftersale-result {
			height: 2.5rem;
			line-height: 2.5rem;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.aftersale-result img {
			display: inline-block;
			width: 1rem;
			vertical-align: sub;
		}

		.timeline {
			background-color: #FFFFFF;
		}

		.timeline-item {
			position: relative;
			padding-left: 2rem;
			margin-left: 0.85rem;
		}
		/*垂直线*/

		.timeline-item:before {
			content: '';
			position: absolute;
			top: 0rem;
			left: 1.1rem;
			width: 1px;
			height: 100%;
			margin-top: -.05rem;
			background-color: #f5f5f5;
		}

		.timeline-item:first-child:before {
			top: 50%;
			height: 50%;
		}

		.timeline-item:last-child:before {
			bottom: 50%;
			height: 50%;
		}

		.timeline-item.oneitem:before {
			top: 50%;
			height: 0%;
		}
		/*小圆点*/

		.timeline-item:after {
			content: '';
			position: absolute;
			top: 50%;
			margin-top: -.8rem;
			width: 0.8rem;
			height: 0.8rem;
			left: 1rem;
			margin-left: -0.25rem;
			background-color: #72D5EF;
			border-radius: 50%;
		}

		.timeline-item.highlight:after {
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			background-color: #72D5EF;
			z-index: 2;
		}

		.timeline-item-content {
			padding: 0.9rem 0;
		}

		.ming-text-app-dark {
			color: #690078 !important;
		}

		.circle_active {
			width: 0.8rem;
			height: 0.8rem;
			border-radius: 50%;
			border: 0.25rem solid #72D5EF;
		}

		.circle_null {
			width: 0.3rem;
			height: 0.3rem;
			border-radius: 50%;
			background: rgba(213, 243, 251, 1);
			margin: 0 auto;
		}

		.title_active {
			font-size: 0.7rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}

		.title {
			font-size: 0.6rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
		}
		.after_cont {
			background: #ffffff;
			border-bottom: 0.5rem solid #F6F6F6;
		}

		.after_cont>div {
			display: flex;
		}

		.after_cont>div .main_img {}

		.btn_detail {
			height: 2.5rem;
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}

		.btn_detail>div {
			width: 4rem;
			height: 1.5rem;
			border-radius: 0.85rem;
			border: 0.03rem solid rgba(221, 221, 221, 1);
			font-size: 0.7rem;
			font-family: PingFangSC;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			line-height: 1.5rem;
			text-align: center;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak="">
		<!-- <div class="aui-padded-t-15 aui-border-b ming-bg-white ming-padded-0-10" style="height: 3rem;">
				<div class="aui-font-size-13 ming-text-hui aui-padded-l-5">
					服务单号：{{info.service_num}}
				</div>
				<div class="aui-font-size-13 ming-text-hui aui-padded-l-5">
					申请时间：{{info.add_time}}
				</div>
			</div> -->
			<!-- 主体 -->
			<div class="after_cont" style="padding:0.8rem 0.8rem 0 0.8rem;">
				<div style="border-bottom:1px solid rgba(238,238,238,0.5);padding-bottom:0.85rem;">
					<img :src="info.good.cover"  style="width: 3.2rem;height:3.2rem;border-radius:0.2rem;margin-right:0.6rem;" alt="">
					<div class="right_cont">
						<div class="aui-ellipsis-1" style="width:13.35rem;line-height:0.85rem!important;font-size:0.7rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(50,50,51,1);margin-bottom:0.2rem;">
						{{info.good.title}}
						</div>
						<div style="width:6rem;height:0.85rem;font-size:0.6rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(153,153,153,1);line-height:0.85rem;margin-bottom:0.2rem;">
							{{info.good.good_sku}}
						</div>
						<div style="padding-right:0.75rem;font-size:0.75rem;font-family:PingFangSC-Medium;font-weight:500;color:rgba(51,51,51,1);line-height:1.05rem;display:flex;justify-content:space-between;width:13.35rem;align-items:center;">
							<span>￥{{info.good.good_price}}</span>
							<span style="font-size:0.6rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(153,153,153,1);margin-right:0.2rem">×{{info.good.good_num}}</span>
						</div>
					</div>
				</div>

			</div>

		<div style="display:flex;height:2.75rem;width:100%;padding:0 .75rem;background-color:#fff;color:#222222;margin-bottom:.5rem;">
			<span class="aui-font-size-15" style="flex:1;margin:auto;font-size:0.75rem;font-family:PingFangSC-Regular;">
					申请时间
				</span>
			<span style="flex:1;margin:auto;text-align:right;font-weight:400;color:rgba(102,102,102,1);font-size:0.75rem;font-family:PingFangSC-Regular;">
					{{info.add_time}}
				</span>
		</div>

		<div class="schedule ming-bg-white" style="padding:0 .75rem;">
			<div class="schedule-header aui-border-b aui-font-size-15" style="height: 2.5rem;line-height: 2.5rem;font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(50,50,51,1);margin-bottom:1rem;">
				进度跟踪
			</div>

			<div style="padding-bottom:1rem;">
				<div v-for="(vo,index) in info.order_after_service_log" style="display:flex;">
					<div style="width:0.8rem;margin-right:0.8rem;">
						<div :class="index==0?'circle_active':'circle_null'"></div>
						<div class="line" style="width:0.05rem;height:2.2rem;margin:0 auto;background-color:#D5F3FB;" v-if="index != info.order_after_service_log.length - 1">

						</div>
					</div>
					<div style="margin-top:-0.3rem;">
						<!-- 提交情况 -->
						<div :class="index == 0?'title_active':'title'">
							{{vo.remark}}
						</div>
						<!-- 提交时间 -->
						<div class="aui-font-size-12" style="font-size:0.6rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(153,153,153,1);">
							{{vo.add_time}}
						</div>
					</div>
				</div>

			</div>
		</div>


			<div class="remark" v-if="info.refuse_remark!=''" style="background-color:#fff;margin-top:5px;">
				<div style="padding:10px">售后详情:</div>
				<div  style="padding:10px">
					<span v-html='info.refuse_remark'></span>
				</div>
			</div>
	</div>
	</div>
</body>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript" src="../../../script/vue.js"></script>
<script type="text/javascript" src="../../../script/common.js"></script>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			id: 0,
			info: {}
		},
		methods: {
			get_list: function() {
				get_data('api/OrderAfterService/afterServiceDetail', {
					token: $api.getStorage('token'),
					id: vm.id
				}, function(ret) {
					console.log(JSON.stringify(ret));

					if (ret.status) {
						vm.info = ret.data
					}
				})
			}
		}
	})
	apiready = function() {
		vm.id = $api.getStorage('id')
		console.log(vm.id);

		vm.get_list()
		fnInitPullRefresh(function(ret) {
			vm.get_list()
		})
		// 新版刷新
	refresh_new(function() {
		setTimeout(function() {
			vm.get_list()
			api.refreshHeaderLoadDone()
		}, 1000)
	})
	}
</script>

</html>
